<template>
  <div>
    <div ref="chartColumn" style="width:1200px; height:370px;"></div>
    <!--    <button @click="changeOption">点击改变内容</button>-->
  </div>

</template>

<script>
// import { getpdFx } from "@/api/industry/shulian";
import * as echarts from 'echarts';
import {getNeed} from "../../api/industry/shulian";
export default {
  data() {
    return {
      newData:[],
      types:'全',
      chartColumn: null,
      option:{
        xAxis: {
          type: 'category',
          data: ['技术空间', '人才空间', '大型活动', '园区企业商城', '课题', '科技服务平台', '智慧化建设','成果转化空间']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      },
    }
  },
  methods: {
    //统计产业物理空间信息
    updateChartWithData(types) {
      const ypes = this.types
      // console.log(types, "统计企业用户12");
      // 调用接口获取数据
      getNeed(types).then(res => {

        for (let i=0;i<res.data.length;i++){
          let modelItem={};
          modelItem["value"]=res.data[i].count;
          modelItem["name"]=res.data[i].name;
          this.newData[i]=modelItem;
        }
        // console.log(this.newData,'這是s6什麼');
        // 更新echarts的data和xAxis.data属性
        this.option.series[0].data = this.newData;
        // this.option.xAxis[0].data = this.newData.name;
        // this.option.xAxis[0].data = this.newData.map(item => item.name); // 假设xAxis设置为数组，如果不是数组，请根据实际情况调整

        // 更新图表
        this.chartColumn.setOption(this.option);
      })
    },
    initChart() {
      this.chartColumn = echarts.init(this.$refs.chartColumn);
      // Uncomment the following line if you want to show a loading animation during the API request
      // this.chartColumn.showLoading();

      // Fetch API data and update the chart
      this.updateChartWithData();
    }
  },
  mounted() {
    this.initChart();
    this.updateChartWithData()
  }
}
</script>

<style scoped>

</style>
